<template>
  <div id="mine-profit">
    <nav>
      <article>
        <h2>余额（元）</h2>
        <router-link to="/mine/mine-withdraw" tag="a">{{ mine.balance }}<span>></span></router-link>
      </article>
      <div>
        <h4>昨日收益（元）</h4>
        <p>{{ mine.yesterday_num }}</p>
      </div>
      <div>
        <h4>累计收益（元）</h4>
        <p>{{ mine.total_price }}</p>
      </div>
    </nav>

    <section
      v-for="(item, index) in sections"
      :key="index"
      v-if="item.data !== {}">
      <header>
        <span></span>
        {{ item.title }}
      </header>
      <article>
        <div>
          <span>累积</span>
          <span>{{ item.data.total_price }}</span>
        </div>
        <div>
          <span>本月</span>
          <span>{{ item.data.month }}</span>
        </div>
        <div>
          <span>本日</span>
          <span>{{ item.data.day }}</span>
        </div>
        <div>
          <span>本年</span>
          <span>{{ item.data.year }}</span>
        </div>
      </article>
      <router-link :to="item.detailLink" tag="button">查看明细</router-link>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'mine-profit',
    data() {
      return {

        // 根据后台接口数据 键名 与 格式

        mine: {
          balance: '0',
          yesterday_num: '0',
          total_price: '0'
        },

        sections: [
          {
            title: '我的分润',

            // 根据后台接口数据 键名 与 格式

            /**
             * {
             *    day: '',
             *    month: '',
             *    total_price: '',
             *    year: ''
             * }
             */

            data: {},
            detailLink: '/mine/mine-profit-detail/1'
          },
          {
            title: '中级分润',
            data: {},
            detailLink: '/mine/mine-profit-detail/2'
          },
          {
            title: '初级分润',
            data: {},
            detailLink: '/mine/mine-profit-detail/3'
          }
        ]
      }
    },
    created() {

      // 根据角色 id 判断展示的分润表格

      if (localStorage.getItem('role_id') === '4') {
        this.sections.splice(1, 1);
      } else if (localStorage.getItem('role_id') === '5') {
        this.sections.splice(1, 2);
      }
    },
    beforeMount() {
      this.$http.post({
        api: this.$api.USER_PROFIT,
        params: {
          user_id: localStorage.getItem('id')
        },
        success: (res) => {
          this.mine = res.data.data.mine;

          for (let i =0; i < this.sections.length; i++) {
            this.sections[i].data = res.data.data.rate[i];
          }
        }
      });
    }
  }
</script>

<style scoped lang="scss">

  #mine-profit {

    >nav {

      $this-nav-padding: 1rem;

      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 20rem;
      padding: $this-nav-padding;
      margin-bottom: 1rem;
      box-shadow: $public-box-shadow-bolder;
      background: #0879c9;
      background: -moz-linear-gradient(top, #0196ff, #0879c9);
      background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0196ff), to(#0879c9));

      >article {
        width: $size-as-parent;
        text-align: center;

        >h2 {
          font-size: 1.5rem;
          color: $white;
        }
        >a {
          position: relative;
          display: block;
          width: $size-as-parent;
          font-size: 3.6rem;
          color: $white;

          >span {
            position: absolute;
            top: 0;
            right: 0;
            height: $size-as-parent;
          }
        }
      }

      >div {
        position: absolute;
        color: $white;
        font-size: 1.2rem;

        &:nth-of-type(1) {
          left: $this-nav-padding;
          bottom: $this-nav-padding;
        }

        &:nth-of-type(2) {
          right: $this-nav-padding;
          bottom: $this-nav-padding;
        }

        >p {
          text-align: center;
        }
      }
    }

    >section {
      margin-bottom: 1rem;
      box-shadow: $public-box-shadow;
      background: $white;

      >header {
        display: flex;
        align-items: center;
        height: 4rem;
        font-size: 1.5rem;
        color: #333;
        padding-left: 1rem;

        >span {
          width: 1.8rem;
          height: 1.8rem;
          background: url("../../assets/images/mine/icon-dollar.png") no-repeat center / $size-as-parent auto;
          margin-right: .6rem;
        }
      }

      >article {
        display: flex;
        flex-wrap: wrap;

        >div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 50%;
          height: 6rem;
          padding: 0 1rem;
          border-top: 1px solid #f5f5f5;

          &:nth-of-type(2n + 1) {
            border-right: 1px solid #f5f5f5;
          }

          >span {
            font-size: 1.5rem;
            color: #999;
          }

          &:nth-of-type(2) > span {
            color: #0196ff;
          }
        }
      }

      >button {
        width: $size-as-parent;
        height: 4rem;
        font-size: 1.8rem;
        color: #333;
        background: #e9f6ff;
      }
    }
  }
</style>
